<template>
	<view :class="['otc',{'dark':theme=='dark'}]">
		<view :class="['bglist3','funs',{'darksss':theme=='dark'}]">
			<view class="wrap">
				
				<!-- USDT 出售的示例代码 -->
				<view :class="['income-card','funs',{'darksss':theme=='dark'}]">
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="tpc">购买 USDT</view>
						</u-col>
						<u-col span="4">
							<view class="tit" @click="funsItemClick(1)">
							     <image src="../../static/member/right_icon.png" mode=""></image>
							</view>
						</u-col>
					</u-row>
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="apt">限 额</view>
							<view class="">￥10 ~ ￥100</view>
						</u-col>
						<u-col span="4">
							<view class="apt">数 量（USDT）</view>
							<view class="">2500.000000</view>
						</u-col>
						<u-col span="4">
							<view class="aptp">单 价</view>
							<view class="aptpp">￥18471.09</view>
						</u-col>
					</u-row>
					
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="apt">时 间</view>
							<view class="">02-05 12:30</view>
						</u-col>
						<u-col span="4">
							<view class="apt">买入（USDT）</view>
							<view class="">2000.000000</view>
						</u-col>
						<u-col span="4">
							<view class="aptp">成 交</view>
							<view class="aptpp">￥10000.00</view>
						</u-col>
					</u-row>
					
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="start">
							<u-col span="4">
								<view class="">宇都宫紫苑</view>
							</u-col>
							<!-- 支付宝 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/zfb.png"></image>
								</view>
							</u-col>
							<!-- 微信 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/wx.png"></image>
								</view>
							</u-col>
							<!-- 银行卡 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/yhk.png"></image>
								</view>
							</u-col>
							
							<!-- 交易反馈 -->
							<view class="gman">
								<u-button  size="mini" plain>交易成功</u-button>
							</view>
					</u-row>
				</view>
				
				<!-- USDT 出售的示例代码 -->
				<view :class="['income-card','funs',{'darksss':theme=='dark'}]">
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="tpcc">出售 USDT</view>
						</u-col>
						<u-col span="4">
							<view class="tit" @click="funsItemClick(1)">
							     <image src="../../static/member/right_icon.png" mode=""></image>
							</view>
						</u-col>
					</u-row>
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="apt">限 额</view>
							<view class="">￥10 ~ ￥100</view>
						</u-col>
						<u-col span="4">
							<view class="apt">数 量（USDT）</view>
							<view class="">2500.000000</view>
						</u-col>
						<u-col span="4">
							<view class="aptp">单 价</view>
							<view class="aptpp">￥18471.09</view>
						</u-col>
					</u-row>
					
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="apt">时 间</view>
							<view class="">02-05 12:30</view>
						</u-col>
						<u-col span="4">
							<view class="apt">卖出（USDT）</view>
							<view class="">2000.000000</view>
						</u-col>
						<u-col span="4">
							<view class="aptp">成 交</view>
							<view class="aptpp">￥10000.00</view>
						</u-col>
					</u-row>
					
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="start">
							<u-col span="4">
								<view class="">宇都宫紫苑</view>
							</u-col>
							<!-- 支付宝 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/zfb.png"></image>
								</view>
							</u-col>
							<!-- 微信 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/wx.png"></image>
								</view>
							</u-col>
							<!-- 银行卡 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/yhk.png"></image>
								</view>
							</u-col>
							
							<!-- 交易反馈 -->
							<view class="gman">
								<u-button  size="mini" plain>正在交易</u-button>
							</view>
					</u-row>
				</view>
				
				<!-- USDT 失败的示例代码 -->
				<view :class="['income-card','funs',{'darksss':theme=='dark'}]">
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="tpcc">出售 USDT</view>
						</u-col>
						<u-col span="4">
							<view class="tit" @click="funsItemClick(1)">
							     <image src="../../static/member/right_icon.png" mode=""></image>
							</view>
						</u-col>
					</u-row>
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="apt">限 额</view>
							<view class="">￥10 ~ ￥100</view>
						</u-col>
						<u-col span="4">
							<view class="apt">数 量（USDT）</view>
							<view class="">2500.000000</view>
						</u-col>
						<u-col span="4">
							<view class="aptp">单 价</view>
							<view class="aptpp">￥18471.09</view>
						</u-col>
					</u-row>
					
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="between">
						<u-col span="4">
							<view class="apt">时 间</view>
							<view class="">02-05 12:30</view>
						</u-col>
						<u-col span="4">
							<view class="apt">卖出（USDT）</view>
							<view class="">2000.000000</view>
						</u-col>
						<u-col span="4">
							<view class="aptp">成 交</view>
							<view class="aptpp">￥10000.00</view>
						</u-col>
					</u-row>
					
					<u-line color="#5559691f"></u-line>
					<u-row gutter="16" justify="start">
							<u-col span="4">
								<view class="">樱井野莉亚</view>
							</u-col>
							<!-- 支付宝 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/zfb.png"></image>
								</view>
							</u-col>
							<!-- 微信 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/wx.png"></image>
								</view>
							</u-col>
							<!-- 银行卡 -->
							<u-col span="1">
								<view class="">
								<image class="funsItemImage" src="../../static/business/yhk.png"></image>
								</view>
							</u-col>
							
							<!-- 交易反馈 -->
							<view class="gman">
								<u-button  size="mini" plain>交易失败</u-button>
							</view>
					</u-row>
				</view>
				

			</view>
		</view>

	</view>
</template>

<script>
	import {domain} from '@/common/domain.js'
	import {mapState,mapActions,mapGetters} from 'vuex';
	import uniPopup from '@/components/uni-popup2.vue';
	import {commonNewsList,commonCarousel,huobiTicket,info,logout} from '../../common/apiString.js'
	import {myMixins} from '@/common/myMixins.js'//加入全局下拉刷新
	export default{
		mixins:[myMixins],
		data() {
			return {
				
			}
		},
		computed:{
			...mapState({
			  theme:state=>state.theme
			}),
		},
		onLoad() {
			uni.setNavigationBarTitle({
				title:this.$t('login').Orderrecord
			})
			this.$utils.setTheme(this.theme);
			this.getHtml()
		},

		methods: {
			change(index) {
				this.current = index;
			},
			//路由开始
			funsItemClick(index){
				if(index==1){
					uni.navigateTo({
						url:'/pages/otc/Orderdetails'//订单详情
					})
				};
			},
			//路由结束
		},
		
	}
</script>

<style lang="scss">
	page {
		background: #f8f8f99c;
	}

	.otc{
		width: 100%;
		height: 100%;
		
		.bglist1 {
			background: #3e38ec;
			height: 20vw;
		}
		
		.bglist2 {
			display: flex;
			    height: 40px;
			    line-height: 40px;
			    background: #ffffff;
			    position: relative;
			    top: -8vw;
			    border-top-left-radius: 3vw;
			    border-top-right-radius: 3vw;
		}
		.bglist3 {
			position: relative;
			top: 0vw;
		}
			
		.side{
			    position: absolute;
			    top: 2vw;
			    right: 0;
			    left: 90vw;
		}
		.wrap {
				padding: 2vw;
			}
		
			.u-row {
				    margin: 2vw 0;
			}
		
			.demo-layout {
				height: 8vw;
				border-radius: 8rpx;
			}
		
			.bg-purple {
				background: #d3dce6;
			}
		
			.bg-purple-light {
				background: #e5e9f2;
			}
		
			.bg-purple-dark {
				background: #99a9bf;
			}
			.income-card {
			        width: 100%;
			        background-color: #fff;
			        border-radius: 1vw;
			        padding: 2px;
			        margin-top: 10px;
			}
			.bic {
			    position: relative;
			    top: 0vw;
			    right: -16vw;
				color: #b7b8bd;
				font-size: 3vw;
			}
			
			.apt {
			    padding: 2vw 0;
			}
		
			.aptp {
				position: relative;
				top: 0vw;
				right: -20vw;
			    padding: 2vw 0;
			}
			.aptpp {
				position: relative;
				top: 0vw;
				right: -12vw;
			}
			.aptpp {
				position: relative;
				top: 0vw;
				right: -12vw;
			}
			
			.tpc {
				font-size: 3.4vw;
				font-weight: 700;
				color: #F44336;
				
			}
			
			.tpcc {
				font-size: 3.4vw;
				font-weight: 700;
				color: #4CAF50;
			}
			
			.funsItemImage {
				position: relative;
				top: 0vw;
			    width: 6vw;
			    height: 6vw;
			    border-radius: 0%;
			}
		    .gman {
				position: relative;
				top: 0vw;
				right: 0;
				left: 22vw;
			}
			.tit uni-image {
			    width: 5px;
			    height: 10px;
				position: relative;
				    top: 0vw;
				    right: -26vw;
				    color: #b7b8bd;
				    font-size: 3vw;
			}
		
		
	}

</style>
